<template>
	<!-- 商品列表 -->
	<view class="good_box">
		<image :src="img" class="image"></image>
		<view class="content">
			<view class="both_ends">
				<view class="price_title u-line-1">
					{{name}}
				</view>
				<view class="price">
					￥{{Math.trunc(price*1)}}
				</view>
			</view>
			
			<u-gap height="20rpx" ></u-gap>
			
			<view class="sku" v-if="sku">
				
				<u-tag v-for="(val,i) in sku.split('-')" :key='i' :text="val"
					type="warning"size="mini" plain class='tag' />
			</view>
			
			
			<u-gap height="20rpx" v-if="is_fee"></u-gap>
			<view class="both_ends" v-if="is_fee">
				<view class="both">
					手工费：
				</view>
				<view class="ends">
					￥{{cost}}
				</view>
			</view>
			<u-gap height="20rpx"></u-gap>
			<view class="both_ends">
				<view class="both">
					数量：
				</view>
				<view class="ends">
					x{{num}}
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		props: {
			img: {
				type: String,
			},
			name: {
				type: String,
			},
			price: {
				type: [String,Number],
			},
			num: {
				type: [String,Number],
			},
			cost: {
				type: [String,Number],
			},
			sku: {
				type: [String,Array],
			},
			is_fee:{
				type:true,
				default:true
			}
			
		},
		data() {
			return {
			};
		}
	}
</script>

<style lang="scss">
	.good_box {
		width: 100%;
		display: flex;
		justify-content: space-between;
	
		.image {
			border-radius: 8rpx;
			width: 124rpx;
			height: 124rpx;
			flex-shrink: 0;
			margin-right: 20rpx;
		}
	
		.content {
			width: 100%;
	
			.both_ends {
				width: 100%;
				display: flex;
				justify-content: space-between;
				color: #9D97A7;
				font-size: 26rpx;
				align-items: flex-end;
				.both {}
	
				.ends {}
				
				.price_title{
					color: #000;
					font-size: 30rpx;
				}
				.price{
					color: #999999;
					font-size: 26rpx;
				}
			}
			
		}
	
		
	}
	
	.fee {
		font-size: 26rpx;
		color: #9D97A7;
	}
	.sku {
			font-size: 24rpx;
			font-weight: 600;
			margin: 20rpx 0;
			display: flex;
			justify-content: flex-start;
			flex-wrap: wrap;
			
			.tag{
				margin-right: 20rpx;
			}
			
	
		}
	
	
</style>
